<template>
	<!-- 新增地址 -->
	<view class='container' >
		<view class="wrapper">
			<view class='mui-content input-content'>
				<view class='input-item'>
					<text class="tit">姓名</text>
					<input class='minput' type='text' v-model="aname" placeholder='联系人姓名'></input>
				</view>
				<view class='input-item'>
					<text class="tit">手机</text>
					<input class='minput' v-model="atel" type='number' placeholder='请输入联系方式'></input>
				</view>
				<view id='showCityPicker3' class='input-item' @click="open">
					<text class="tit">地址</text>
					<input class='minput' placeholder="请选择所属区域" disabled="ture" v-model="astr"></input>
				</view>
				<!-- 选择地址的 弹出层 -->
				<cityPicker :defaultValue="defaultValue" :mask-close-able="maskCloseAble" @confirm="confirm" @cancel="cancel" :visible="visible" />
				
				<view class='input-item'>
					<textarea class="xiangxi" placeholder="请输入详细地址" placeholder-style="color:#999;" v-model="adetail" />
					</view>
				<view class="moren">
						<view class="uni-list">
							<view class="uni-list-cell uni-list-cell-pd">
								<view class="uni-list-cell-db" >设为默认地址</view>
								<switch color="#FDD100" :checked="!adefault" class="kaiguan" @click="de_checked"/><!--  -->
							</view>
					</view>
			</view>
		</view>
	<button class="confirm-btn" @click="saveAddress()">确认</button><!-- aname,atel,addr_id,adetail,acode,adefault,astr -->
	</view>
 </view>
</template>

<script>
import cityPicker from '../../components/piaoyi-cityPicker/pioayi-cityPicker.vue'
export default {
	components: {
		cityPicker
	},
	data() {
		return {
			aname:"",
			atel:"",
			addr_id:"",//地址ID
			adetail:"",//详细地址
			acode:[],//地区编码
			adefault:false,//是否 设为默认地址
			astr: '',
			token:"",
			uid:"",
			host:'https://4de16698-d9f4-443a-b416-ef1037cce952.bspapp.com/http',
			visible: false,
			maskCloseAble: true,
			defaultValue: ''
		}
	},
	onLoad(options) {
		console.log(options);
		this.addr_id=options.addr_id;
		this.acode=options.acode;
		this.astr=options.astr;
		this.adetail=options.adetail;
		this.adefault=options.adefault;
		this.aname=options.aname;
		this.atel=options.atel;
	},
	methods: {
		// 保存收货地址信息 
		saveAddress(){
			let uid=uni.getStorageSync('uid')
			let token=uni.getStorageSync('token')
			this.uid=uid;
			this.token=token;
			uni.request({
				method:'POST',
				header:{
					'token':this.token
				},
				data:{
					name:this.aname,//收货人名字  
					tel:this.atel,//手机号  
					addr_text:this.astr,//地址  
					addr_code:this.acode,//地区编码 一个数组  
					detail:this.adetail,//收货地址详情 如人民路21号2号楼2单元  
					is_default:this.adefault,//是否设为默认地址 true/false
					addr_id:this.addr_id,//地址ID 有的话表示是修改地址 没得话是新增
					uid:this.uid
				},
				url:this.host+'/order/saveAddress',
				success:(res) => {
					console.log(res);
					console.log(this.addr_id);
					uni.$u.toast(res.data.msg)
					uni.navigateBack({
						delta:1
					})
				},
				fail: () => {
					console.log('请求失败');
				} 
			})
		},
		// 是否 设置成默认
		de_checked(){
			if(this.adefault==true){
				this.adefault=false
			}else{
				this.adefault=true
			}
			console.log(this.adefault);
		},
		// 选择地址的 弹出层 的方法open,confirm,cancel
		open () {
			this.visible = true
		},
		confirm (val) {
			console.log(val)
			this.astr = val.name
			this.acode=val.code
			this.visible = false
		},
		cancel () {
			this.visible = false
		}
	}
}
</script>

<style lang="scss">
	.uni-input-placeholder {
		color: #999
	}
	.container {
		position: relative;
		width: 100vw;
		height: 90vh;
		overflow: hidden;
		background: #f7f7f7;
	}
	.input-content {
		background: #fff;
	}
	
	
	.input-item {
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
		height: auto;
		padding: 16upx 30upx;
		background: #fff;
		border-bottom: 1px solid #f5f5f7;
		&:last-child {
			margin-bottom: 0;
		}
		.pieckerInput{
			color: #333;
			width: calc(100% - 230upx);
			font-size: 30upx;
			display: inline-block;
			line-height: 60upx;
		}

		.xiangxi{
			width: 100%;
			height: 162upx;
			padding: 14upx 10upx;
			font-size: 30upx;
		}
		.tit {
			height: 60upx;
			line-height: 60upx;
			font-size: 30upx;
			color: $font-color-dark;
			width: 200upx
		}
		.iconfont {
			color: #999;
			line-height: 60upx;
			position: absolute;
			right: 30upx;
		}
		input {
			height: 60upx;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			flex: 1;
			width: calc(100% - 50upx);
			text-align: right;
		}
	
		.clear_input {
			position: absolute;
			right: 0;
			top: 10upx;
			padding: 10upx;
	
			.iconfont {
				font-size: 40upx;
				color: $font-color-light
			}
		}
	}
	
	.confirm-btn {
		position: fixed;
		left: 0;
		bottom: 10px;
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		border-radius: 4px;
		background: $color1;
		color: #fff;
		font-size: $font-lg;
		&:after {
			border-radius: 100px;
			border: none;
		}
	}
	.moren{
		border-top: 20upx solid #f7f7f7;
		padding: 0 30upx; 
		height: 110upx;
		line-height: 90upx;
		overflow: hidden;
		font-size: 30upx;
			.uni-list-cell-db{ 
				float: left;
				color: #333;
				}
		.kaiguan{
				float: right;
		} 
	}
	.allinfo {
		width: 100%;
		height: 100%;
		background: #fff;
	}

	.xzdz .box01 {
		width: 94%;
		height: 45px;
		border-bottom: 1px solid #f7f7f7;
		margin-left: 3%;
	}

	.xzdz .box01 input {
		width: 72%;
		height: 45px;
		float: right;
	}

	.xzdz .box01 text {
		width: 70px;
		line-height: 45px;
	}


	.xzdz .box01.mr .iconfont {
		line-height: 42px;
		font-size: 18px;
		vertical-align: middle;
	}

	.xzdz .box01.gouxuan .iconfont:before {
		color: #4499ee;
		content: "\e61e";
	}

	.allinfo .btn {
		width: 100%;
		height: 45px;
		line-height: 45px;
		background: #4499ee;
		border-radius: 0;
		position: fixed;
		bottom: 0;
		color: #fff;
		font-size: 16px;
	}

	.pickerMask {
		position: fixed;
		z-index: 1000;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
	}
	uni-switch .wx-switch-input:not([class*="bg-"]), uni-switch .uni-switch-input:not([class*="bg-"]){}
</style>
